<template>
    <div id="basic">
      <div style="">
  
  
         <!-- 孕期营养处方 -->
            <div style="display: flex; ">
               <div style="display: flex; width:100%;">
                  <div style="width: 60%;background-color:#2196f3;height: 100px;text-align: center;line-height: 100px; " >
                     <span style="font-size: 30px; font-weight: bold; color: #ffffff" >成人</span><span style="font-size: 30px; color: #666666; margin-left: 20px" >营养处方报告</span>
                  </div>
                  <div style="height: 100px; width: 40%;background-color:#2196f3;">
                    <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt=""/> -->
                  </div>
                </div>
             
            </div>
  
            <div style="width: 100%; height: 40px; background-color: #2196f3; margin-top: 10px; display: flex;">
          <div><img src="../../assets/img/12_1.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">成人基本信息</div>
        </div>
           <div style="width: 1070px; border-top: 2px solid #2196f3; border-right: 2px solid #2196f3;  margin-top: 10px">
              <div style="display: flex">
                <div style="background-color: #2196f3; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">检测日期</div>
                <div style="width: 90%; height: 40px; border-bottom: 2px solid #2196f3; line-height: 40px; text-indent: 20px;">
                  {{ report_time }}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  成人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  {{contents.username ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  性别
                </div>
                <div style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  {{contents.sex == 1 ? '女':'男' ?? '[]'}}
                </div>
                <div style="background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  出生日期
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  {{birth ?? '[]'}}
                </div>
                <div style=" background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.guardian_name ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护人手机号
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >
                  {{contents.guardian_mobile ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  身高
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.height ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.weight ?? '[]'}}KG
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  头围
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.touwei ?? '[]'}}CM
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生身长
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.chushengsg ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.chushengtz ?? '[]'}}KG
                </div>
                <div style="background-color:#2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  腹围
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.fuwei ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  血型
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.xuexing_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  民族
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.minzu_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护关系
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.guanxi_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  家长教育
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.jiaoyu_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生情况
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.birthSituation_value ?? '[]'}}
                </div>
              </div>
            </div>
  
           <!-- 运动处方 -->
           <div style="width: 100%;height: 40px;background-color: #2196f3;margin-top: 10px;display: flex;">
              <div><img src="../../assets/img/26.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                喂养建议
              </div>
            </div>
            <div style="width: 1050px;border: 2px solid #2196f3;min-height: 100px;margin-top: 20px;padding: 10px 10px;">
              <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;" v-model="FeedingRecommendations"></textarea>
  
            </div>
            <!-- 评估指导 -->
            <div style="width: 100%;height: 40px;background-color: #2196f3;margin-top: 10px;display: flex;">
              <div><img src="../../assets/img/27_1.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                营养建议
              </div>
            </div>
            <div style="width: 1050px;border: 2px solid #2196f3;min-height: 100px; margin-top: 20px;padding: 10px 10px;">
              <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;" v-model="NutritionRecommendations"></textarea>
            </div>
            <!-- 医生建议 -->
            <div style="width: 100%;height: 40px;background-color: #2196f3;margin-top: 10px;display: flex;">
              <div><img src="../../assets/img/27_1.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                医生建议
              </div>
            </div>
            <div style="width: 1050px;border: 2px solid #2196f3;min-height: 100px; margin-top: 20px;padding: 10px 10px;">
              <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;" v-model="DoctorRecommendations"></textarea>
            </div>
            <!-- 复诊预约 -->
            <div style="width: 100%;height: 40px;background-color: #2196f3;margin-top: 10px;display: flex;">
              <div><img src="../../assets/img/27_1.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                复诊预约
              </div>
            </div>
            <!-- <div style="width: 99%; border: 2px solid #2196f3; min-height: 60px; margin-top: 20px;display: flex;">
              <div
                style="width: 13%;line-height: 60px;background-color: rgb(42, 178, 139);color: #fff;height: 100%;text-align: center; border-right: 2px solid #2196f3;">
                复查建议及时间
              </div>
              <div>
                <div style="margin-top: 10px; margin-left: 10px">
                  复诊建议∶为避免健康风险，请及时到院复诊
                </div>
                <div style="margin-top: 5px; margin-left: 10px">
                  复查建议及时间 复诊时间∶2021-12-01
                </div>
              </div>
            </div> -->
            <div style="width: 30%;height: 40px;border: 2px solid #2196f3;margin-top: 20px;margin-bottom: 20px;">
              <div
                style=" width: 42%;line-height: 40px;background-color: #2196f3;color:#fff;height: 100%;text-align: center;border-right: 2px solid #2196f3;">
                医师签字
              </div>
              <div></div>
            </div>
          </div>
      </div>
    <div>
  </div>
  </template>
  
  
  <script setup>
  import { defineComponent, onMounted, ref, watch } from "vue";
  import { ElMessage } from "element-plus";
  import * as api from "../../api/loginHttp";
  import http, { baseUrl } from "../../utils/http";
  import { useRoute, useRouter } from "vue-router";
  import PrintJS from "print-js";
//   import ChildViewDietary from "../common/ChildViewdietarys.vue";
  
  const router = useRouter();
  const route = useRoute();
  const labName = ref();
  const groupId = ref();
  const reportId = ref();
  const id = ref();
  const early_intervention = ref({});
  const Monitoring_content = ref({});
  const high_contents = ref({});
  const pagoda = ref({});
  const principle = ref({});
  const diet = ref({});
  const contents = ref({})
  const birth = ref()
  
  
  const FeedingRecommendations=ref()
  const NutritionRecommendations=ref()
  const DoctorRecommendations=ref()
  
  const username = ref();
  const guardian = ref();
  const birthStatus = ref();
  
  const imgUrl = ref();
  const form = ref({
    elText: "",
    elTextTwo: "",
    elTextThree: "",
  });
  
  const letEnergy = ref({ energy: 0, start: 0, end: 0 });
  const protein = ref({ energy: 0, start: 0, end: 0 });
  const fat = ref({ energy: 0, start: 0, end: 0 });
  const carbohydrate = ref({ energy: 0, start: 0, end: 0 });
  const calcium = ref({ energy: 0, start: 0, end: 0 });
  const sodium = ref({ energy: 0, start: 0, end: 0 });
  const magnesium = ref({ energy: 0, start: 0, end: 0 });
  const iron = ref({ energy: 0, start: 0, end: 0 });
  const zinc = ref({ energy: 0, start: 0, end: 0 });
  const selenium = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_a = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_e = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_b1 = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_b2 = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_c = ref({ energy: 0, start: 0, end: 0 });
  const diet_analysis = ref({});
  const hospital_name = ref();
  const report_time = ref();
  
  const onHome = async () => {
    await router.push({ path: "/Home" });
  };
  const kcalType = ref(2);
  
  const fetchData = async () => {
    if (route.params.groupId) {
      groupId.value = route.params.groupId;
      id.value = route.params.id;
      reportId.value = route.params.reportId;
  
      username.value = route.params.username;
      guardian.value = route.params.guardian;
      birthStatus.value = route.params.birth;
      if (groupId.value === 3) {
        labName.value = "婴幼儿营养测评";
      } else if (groupId.value === 5) {
        labName.value = "孕产妇营养测评";
      } else if (groupId.value === 6) {
        labName.value = "成年人营养测评";
      } else if (groupId.value === 7) {
        labName.value = "慢性病营养测评";
      } else {
        labName.value = "婴幼儿营养测评";
      }
  
      http
        .get(
          "api/archives/viewReportMember?id=" +
            reportId.value +
            "&username=" +
            username.value +
            "&guardian=" +
            guardian.value +
            "&birth=" +
            birthStatus.value
        )
        .then((res) => {
          if (res.data.code === 0) {
            ElMessage.error(res.data.msg);
          }
          report_time.value = res.data.data.times;
          contents.value = res.data.data.contents;
          birth.value = res.data.data.contents.birth; 
          FeedingRecommendations.value=res.data.data.feed_advice
          NutritionRecommendations.value=res.data.data.nutrition_advice
          DoctorRecommendations.value=res.data.data.doctor_advice
         
        });
  
      imgUrl.value = "http://" + baseUrl + "/";
  
      let params = {
        groupId: groupId.value,
        id: id.value,
        reportId: reportId.value,
  
        username: username.value,
        guardian: guardian.value,
        birth: birthStatus.value,
      };
      const data = await api.energy(params);
  
      if (data.data.code == 0) {
        ElMessage.error(data.data.msg);
        await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
      }
  
      if (!data.data.data.diet_analysis) {
        ElMessage.error(data.data.msg);
        await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
      }
      for (let i = 0; i < data.data.data.diet_analysis.length; i++) {
        switch (i) {
          case 0:
            data.data.data.diet_analysis[i]["pName"] = "周一";
            break;
          case 1:
            data.data.data.diet_analysis[i]["pName"] = "周二";
            break;
          case 2:
            data.data.data.diet_analysis[i]["pName"] = "周三";
            break;
          case 3:
            data.data.data.diet_analysis[i]["pName"] = "周四";
            break;
          case 4:
            data.data.data.diet_analysis[i]["pName"] = "周五";
            break;
          case 5:
            data.data.data.diet_analysis[i]["pName"] = "周六";
            break;
          case 6:
            data.data.data.diet_analysis[i]["pName"] = "周日";
            break;
        }
      }
  
      diet_analysis.value = data.data.data.diet_analysis;
  
      for (let i = 0; i < data.data.data.diet.length; i++) {
        letEnergy._value.energy =
          letEnergy._value.energy + parseInt(data.data.data.diet[i]["energy"]);
        protein._value.energy =
          protein._value.energy + parseInt(data.data.data.diet[i]["protein"]);
        fat._value.energy =
          fat._value.energy + parseInt(data.data.data.diet[i]["fat"]);
        carbohydrate._value.energy =
          carbohydrate._value.energy +
          parseInt(data.data.data.diet[i]["carbohydrate"]);
        calcium._value.energy =
          calcium._value.energy + parseInt(data.data.data.diet[i]["calcium"]);
        sodium._value.energy =
          sodium._value.energy + parseInt(data.data.data.diet[i]["sodium"]);
        magnesium._value.energy =
          magnesium._value.energy + parseInt(data.data.data.diet[i]["magnesium"]);
        iron._value.energy =
          iron._value.energy + parseInt(data.data.data.diet[i]["iron"]);
        zinc._value.energy =
          zinc._value.energy + parseInt(data.data.data.diet[i]["zinc"]);
        selenium._value.energy =
          selenium._value.energy + parseInt(data.data.data.diet[i]["selenium"]);
        vitamin_a._value.energy =
          vitamin_a._value.energy + parseInt(data.data.data.diet[i]["vitamin_a"]);
        vitamin_e._value.energy =
          vitamin_e._value.energy + parseInt(data.data.data.diet[i]["vitamin_e"]);
        vitamin_b1._value.energy =
          vitamin_b1._value.energy +
          parseInt(data.data.data.diet[i]["vitamin_b1"]);
        vitamin_b2._value.energy =
          vitamin_b2._value.energy +
          parseInt(data.data.data.diet[i]["vitamin_b2"]);
        vitamin_c._value.energy =
          vitamin_c._value.energy + parseInt(data.data.data.diet[i]["vitamin_c"]);
      }
  
      letEnergy._value.start = data.data.data.packAge[0].start_package;
      letEnergy._value.end = data.data.data.packAge[0].end_package;
      letEnergy._value.keyword = "✔ 正常";
      letEnergy._value.color = "everyBlack";
  
      if (letEnergy._value.energy < letEnergy._value.start) {
        letEnergy._value.keyword = "▼ 不足";
        letEnergy._value.color = "everyRed";
        kcalType.value = 3;
      } else if (letEnergy._value.energy > letEnergy._value.end) {
        letEnergy._value.keyword = "▲ 超标";
        letEnergy._value.color = "everyOrange";
        kcalType.value = 1;
      }
  
      protein._value.start = data.data.data.packAge[1].start_package;
      protein._value.end = data.data.data.packAge[1].end_package;
      protein._value.keyword = "✔ 正常";
      protein._value.color = "everyBlack";
      if (protein._value.energy < protein._value.start) {
        protein._value.keyword = "▼ 不足";
        protein._value.color = "everyRed";
      } else if (protein._value.energy > protein._value.end) {
        protein._value.keyword = "▲ 超标";
        protein._value.color = "everyOrange";
      }
  
      fat._value.start = data.data.data.packAge[2].start_package;
      fat._value.end = data.data.data.packAge[2].end_package;
      fat._value.keyword = "✔ 正常";
      fat._value.color = "everyBlack";
      if (fat._value.energy < fat._value.start) {
        fat._value.keyword = "▼ 不足";
        fat._value.color = "everyRed";
      } else if (fat._value.energy > fat._value.end) {
        fat._value.keyword = "▲ 超标";
        fat._value.color = "everyOrange";
      }
  
      carbohydrate._value.start = data.data.data.packAge[3].start_package;
      carbohydrate._value.end = data.data.data.packAge[3].end_package;
      carbohydrate._value.keyword = "✔ 正常";
      carbohydrate._value.color = "everyBlack";
      if (carbohydrate._value.energy < carbohydrate._value.start) {
        carbohydrate._value.keyword = "▼ 不足";
        carbohydrate._value.color = "everyRed";
      } else if (carbohydrate._value.energy > carbohydrate._value.end) {
        carbohydrate._value.keyword = "▲ 超标";
        carbohydrate._value.color = "everyOrange";
      }
  
      calcium._value.start = data.data.data.packAge[4].start_package;
      calcium._value.end = data.data.data.packAge[4].end_package;
      calcium._value.keyword = "✔ 正常";
      calcium._value.color = "everyBlack";
      if (calcium._value.energy < calcium._value.start) {
        calcium._value.keyword = "▼ 不足";
        calcium._value.color = "everyRed";
      } else if (calcium._value.energy > calcium._value.end) {
        calcium._value.keyword = "▲ 超标";
        calcium._value.color = "everyOrange";
      }
  
      sodium._value.start = data.data.data.packAge[5].start_package;
      sodium._value.end = data.data.data.packAge[5].end_package;
      sodium._value.keyword = "✔ 正常";
      sodium._value.color = "everyBlack";
      if (sodium._value.energy < sodium._value.start) {
        sodium._value.keyword = "▼ 不足";
        sodium._value.color = "everyRed";
      } else if (sodium._value.energy > sodium._value.end) {
        sodium._value.keyword = "▲ 超标";
        sodium._value.color = "everyOrange";
      }
  
      magnesium._value.start = data.data.data.packAge[6].start_package;
      magnesium._value.end = data.data.data.packAge[6].end_package;
      magnesium._value.keyword = "✔ 正常";
      magnesium._value.color = "everyBlack";
      if (magnesium._value.energy < magnesium._value.start) {
        magnesium._value.keyword = "▼ 不足";
        magnesium._value.color = "everyRed";
      } else if (magnesium._value.energy > magnesium._value.end) {
        magnesium._value.keyword = "▲ 超标";
        magnesium._value.color = "everyOrange";
      }
  
      iron._value.start = data.data.data.packAge[7].start_package;
      iron._value.end = data.data.data.packAge[7].end_package;
      iron._value.keyword = "✔ 正常";
      iron._value.color = "everyBlack";
      if (iron._value.energy < iron._value.start) {
        iron._value.keyword = "▼ 不足";
        iron._value.color = "everyRed";
      } else if (iron._value.energy > iron._value.end) {
        iron._value.keyword = "▲ 超标";
        iron._value.color = "everyOrange";
      }
  
      zinc._value.start = data.data.data.packAge[8].start_package;
      zinc._value.end = data.data.data.packAge[8].end_package;
      zinc._value.keyword = "✔ 正常";
      zinc._value.color = "everyBlack";
      if (zinc._value.energy < zinc._value.start) {
        zinc._value.keyword = "▼ 不足";
        zinc._value.color = "everyRed";
      } else if (zinc._value.energy > zinc._value.end) {
        zinc._value.keyword = "▲ 超标";
        zinc._value.color = "everyOrange";
      }
  
      selenium._value.start = data.data.data.packAge[9].start_package;
      selenium._value.end = data.data.data.packAge[9].end_package;
      selenium._value.keyword = "✔ 正常";
      selenium._value.color = "everyBlack";
      if (selenium._value.energy < selenium._value.start) {
        selenium._value.keyword = "▼ 不足";
        selenium._value.color = "everyRed";
      } else if (selenium._value.energy > selenium._value.end) {
        selenium._value.keyword = "▲ 超标";
        selenium._value.color = "everyOrange";
      }
  
      vitamin_a._value.start = data.data.data.packAge[10].start_package;
      vitamin_a._value.end = data.data.data.packAge[10].end_package;
      vitamin_a._value.keyword = "✔ 正常";
      vitamin_a._value.color = "everyBlack";
      if (vitamin_a._value.energy < vitamin_a._value.start) {
        vitamin_a._value.keyword = "▼ 不足";
        vitamin_a._value.color = "everyRed";
      } else if (vitamin_a._value.energy > vitamin_a._value.end) {
        vitamin_a._value.keyword = "▲ 超标";
        vitamin_a._value.color = "everyOrange";
      }
  
      vitamin_e._value.start = data.data.data.packAge[11].start_package;
      vitamin_e._value.end = data.data.data.packAge[11].end_package;
      vitamin_e._value.keyword = "✔ 正常";
      vitamin_e._value.color = "everyBlack";
      if (vitamin_e._value.energy < vitamin_e._value.start) {
        vitamin_e._value.keyword = "▼ 不足";
        vitamin_e._value.color = "everyRed";
      } else if (vitamin_e._value.energy > vitamin_e._value.end) {
        vitamin_e._value.keyword = "▲ 超标";
        vitamin_e._value.color = "everyOrange";
      }
  
      vitamin_b1._value.start = data.data.data.packAge[12].start_package;
      vitamin_b1._value.end = data.data.data.packAge[12].end_package;
      vitamin_b1._value.keyword = "✔ 正常";
      vitamin_b1._value.color = "everyBlack";
      if (vitamin_b1._value.energy < vitamin_b1._value.start) {
        vitamin_b1._value.keyword = "▼ 不足";
        vitamin_b1._value.color = "everyRed";
      } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
        vitamin_b1._value.keyword = "▲ 超标";
        vitamin_b1._value.color = "everyOrange";
      }
  
      vitamin_b2._value.start = data.data.data.packAge[13].start_package;
      vitamin_b2._value.end = data.data.data.packAge[13].end_package;
      vitamin_b2._value.keyword = "✔ 正常";
      vitamin_b2._value.color = "everyBlack";
      if (vitamin_b2._value.energy < vitamin_b2._value.start) {
        vitamin_b2._value.keyword = "▼ 不足";
        vitamin_b2._value.color = "everyRed";
      } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
        vitamin_b2._value.keyword = "▲ 超标";
        vitamin_b2._value.color = "everyOrange";
      }
  
      vitamin_c._value.start = data.data.data.packAge[14].start_package;
      vitamin_c._value.end = data.data.data.packAge[14].end_package;
      vitamin_c._value.keyword = "✔ 正常";
      vitamin_c._value.color = "everyBlack";
      if (vitamin_c._value.energy < vitamin_c._value.start) {
        vitamin_c._value.keyword = "▼ 不足";
        vitamin_c._value.color = "everyRed";
      } else if (vitamin_c._value.energy > vitamin_c._value.end) {
        vitamin_c;
        vitamin_c._value.keyword = "▲ 超标";
        vitamin_c._value.color = "everyOrange";
      }
  
      setTimeout(() => {
        print("print-all");
      }, 2000);
    } else {
      ElMessage.error("栏目编号不得为空");
      await router.push({ path: "/Home" });
    }
  };
  const pageList = async () => {
    await router.push({ path: "/pageList/" + groupId.value });
  };
  onMounted(() => {
    fetchData();
  });
  
  onMounted(() => {
    // 需要获取到element,所以是onMounted的Hook
    http
      .get(
        "api/archives/viewreport?id=" +
          reportId.value +
          "&username=" +
          username.value +
          "&guardian=" +
          guardian.value +
          "&birth=" +
          birthStatus.value
      )
      .then((res) => {
        // console.log(res.data.data,'777')
        early_intervention.value =
          res.data.data.high_contents.intervention_one +
          res.data.data.high_contents.intervention_two +
          res.data.data.high_contents.intervention_three;
        Monitoring_content.value =
          res.data.data.high_contents.family_1 +
          res.data.data.high_contents.family_2 +
          res.data.data.high_contents.family_3 +
          res.data.data.high_contents.family_4 +
          res.data.data.high_contents.family_5 +
          res.data.data.high_contents.family_6 +
          res.data.data.high_contents.family_7 +
          res.data.data.high_contents.family_8 +
          res.data.data.high_contents.family_9 +
          res.data.data.high_contents.family_10 +
          res.data.data.high_contents.family_11 +
          res.data.data.high_contents.family_12 +
          res.data.data.high_contents.family_13;
        high_contents.value = res.data.data.high_contents;
        hospital_name.value = res.data.data.hospital_name;
        diet.value = res.data.data.diet;
        pagoda.value = res.data.data.pagoda;
        principle.value = res.data.data.principle;
  
        if (letEnergy._value.energy < letEnergy._value.start) {
        if(!FeedingRecommendations.value){
          FeedingRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==1}).filter(item=>{return item.up_type==2})[0].content.replace(/<.*?>/ig,"");
        }
        if(!NutritionRecommendations.value){
          NutritionRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==2}).filter(item=>{return item.up_type==2})[0].content.replace(/<.*?>/ig,"");
        }
        if(!DoctorRecommendations.value){
          DoctorRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==3}).filter(item=>{return item.up_type==2})[0].content.replace(/<.*?>/ig,"");
        }
      } else if (letEnergy._value.energy > letEnergy._value.end) {
        if(!FeedingRecommendations.value){
        FeedingRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==1}).filter(item=>{return item.up_type==1})[0].content.replace(/<.*?>/ig,"");
        }
        if(!NutritionRecommendations.value){
         NutritionRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==2}).filter(item=>{return item.up_type==1})[0].content.replace(/<.*?>/ig,"");
        }
        if(!DoctorRecommendations.value){
         DoctorRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==3}).filter(item=>{return item.up_type==1})[0].content.replace(/<.*?>/ig,"");
        }
        kcalType.value = 1
      } else {
        if(!FeedingRecommendations.value){
        FeedingRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==1}).filter(item=>{return item.up_type==3})[0].content.replace(/<.*?>/ig,"");
        }
        if(!NutritionRecommendations.value){
           NutritionRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==2}).filter(item=>{return item.up_type==3})[0].content.replace(/<.*?>/ig,"");
        }
        if(!DoctorRecommendations.value){
         DoctorRecommendations.value=res.data.data.foodproposal.filter(item=>{return item.proposal_type==3}).filter(item=>{return item.up_type==3})[0].content.replace(/<.*?>/ig,"");
        }
      }
  
  
        let color = ["#3EA4AA"];
        let color1 = ["#D0443B", "#3EA4AA"];
        let color2 = ["#D0443B", "#3EA4AA"];
        let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
        var arr = [];
        var arr2 = [];
        var parr = res.data.data.contents.primaryHeight;
        for (let i = 0; i < parr.length; i++) {
          arr.push(parr[i].content);
          arr2.push(parr[i].month);
        }
        var arr1 = [];
        var arr3 = [];
        var parr1 = res.data.data.contents.primaryWeight;
        for (let i = 0; i < parr1.length; i++) {
          arr1.push(parr1[i].content);
          arr3.push(parr1[i].month);
        }
  
        var myChart = echarts.init(document.getElementById("myChart1"));
        myChart.value = myChart;
        myChart.setOption({
          backgroundColor: "#fff",
          color: color,
          legend: {
            top: 20,
          },
          tooltip: {
            trigger: "axis",
            formatter: function () {
              return "";
            },
          },
          grid: {
            top: 100,
            containLabel: true,
          },
          xAxis: [
            {
              name: "次数",
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
                padding: [0, 0, 0, -15],
              },
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "BMI值",
              axisLabel: {
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "dotted",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: [
                    "rgba(83,148,208,0.15)",
                    "rgba(103,194,58,0.15)",
                    "rgba(226,203,80,0.15)",
                    "rgba(226,115,80,0.15)",
                  ],
                },
              },
            },
          ],
          series: [
            {
              name: "我的",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color[1],
                },
              },
              symbol: "circle", //数据交叉点样式 (实心点)
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#3EA4AA',
              //         borderWidth: 1,
              //     }
              // },
              data: res.data.data.contents.sumBmi,
            },
          ],
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
  
        var myChart1 = echarts.init(document.getElementById("myChart2"));
        myChart1.value = myChart1;
        myChart1.setOption({
          backgroundColor: "#fff",
          color: color1,
          legend: {
            top: 20,
          },
          tooltip: {
            trigger: "axis",
            formatter: function () {
              return "";
            },
          },
          grid: {
            top: 100,
            containLabel: true,
          },
          xAxis: [
            {
              name: "月份",
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
                padding: [0, 0, 0, -15],
              },
              data: arr2,
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "身高",
              axisLabel: {
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
              },
            },
          ],
          series: [
            {
              // name: "2018",
              name: "国际",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color1[0],
                },
              },
              symbol: "circle", //数据交叉点样式
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#D0443B',
              //         borderWidth: 1,
              //     }
              // },
              data: arr,
            },
            {
              name: "我的",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color1[1],
                },
              },
              symbol: "circle", //数据交叉点样式 (实心点)
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#3EA4AA',
              //         borderWidth: 1,
              //     }
              // },
              data: res.data.data.contents.sumHeight,
            },
          ],
        });
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
  
        var myChart2 = echarts.init(document.getElementById("myChart3"));
        myChart2.value = myChart2;
        myChart2.setOption({
          backgroundColor: "#fff",
          color: color2,
          legend: {
            top: 20,
          },
          tooltip: {
            trigger: "axis",
            formatter: function () {
              return "";
            },
          },
          grid: {
            top: 100,
            containLabel: true,
          },
          xAxis: [
            {
              name: "月份",
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
                padding: [0, 0, 0, -15],
              },
              data: arr3,
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "体重",
              axisLabel: {
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
              },
            },
          ],
          series: [
            {
              // name: "2018",
              name: "国际",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color2[0],
                },
              },
              symbol: "circle", //数据交叉点样式
              // itemStyle: {
              //     normal: {
              //         color: "white",
              //         borderColor: '#D0443B',
              //         borderWidth: 1,
              //     }
              // },
              data: arr1,
            },
            {
              name: "我的",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color2[1],
                },
              },
              symbol: "circle", //数据交叉点样式 (实心点)
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#3EA4AA',
              //         borderWidth: 1,
              //     }
              // },
              data: res.data.data.contents.sumWeight,
            },
          ],
        });
        window.addEventListener("resize", function () {
          myChart2.resize();
        });
      });
  });
  </script>
  
  <style scoped>
  .biao1 {
    width: 25%;
    border-bottom: 1px solid rgb(9, 165, 120);
    border-right: 1px solid rgb(9, 165, 120);
    background-color: rgb(42, 178, 139);
    color: #fff;
  }
  .biao5 {
    width: 25%;
    border-right: 1px solid rgb(9, 165, 120);
    background-color: rgb(42, 178, 139);
    color: #fff;
  }
  .biao6 {
    width: 25%;
    border-right: 1px solid rgb(9, 165, 120);
    color: #000;
  }
  .biao2 {
    width: 25%;
    border-bottom: 1px solid rgb(9, 165, 120);
    border-right: 1px solid rgb(9, 165, 120);
    color: #000;
  }
  .biao3 {
    width: 25%;
    border-bottom: 1px solid rgb(9, 165, 120);
    background-color: rgb(42, 178, 139);
    color: #fff;
  }
  .biao4 {
    width: 75%;
    border-bottom: 1px solid rgb(9, 165, 120);
    color: #000;
  }
  .biao7 {
    width: 25%;
    color: #000;
  }
  .params {
    width: 100%;
    font-size: 22px;
    font-weight: bold;
  }
  #basic .title {
    font-size: 36px;
    width: 100%;
    text-align: center;
  }
  #basic {
    font-size: 14px;
    width: 1075px;
    min-height: 1244px;
    overflow: hidden;
    padding: 0;
    word-break: break-all;
    margin: auto;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-card-border-radius);
    background-color: var(--el-card-bg-color);
    /* color: var(--el-text-color-primary); */
    transition: var(--el-transition-duration);
    --el-card-border-color: var(--el-border-color-light, #ebeef5);
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-color-white);
  }
  #basic #createTime {
    font-size: 16px;
    color: #999999;
    float: right;
  }
  .subTitle {
    font-size: 30px;
    text-align: center;
    height: 30px;
    color: #2196f3;
  }
  
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
    /*min-height: 650px;*/
  }
  
  .images-wrapper {
    width: 100%;
    position: relative;
    height: 173px;
    font-weight: bold;
  }
  .foodsNames {
    color: red;
  }
  
  .images-content {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(55% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 18px;
  }
  
  .service_plate {
    background: url("../../assets/img/evaluaction_service_plate.png") center
      no-repeat;
  }
  
  .dietOn {
    height: 510px;
    margin-bottom:270px;
  }
  
  .everyRed {
    color: red;
  }
  
  .everyOrange {
    color: orange;
  }
  
  .everyBlack {
    color: #333333;
  }
  
  .time-botton {
    background-color: #2196f3;
    width: 108px;
    height: 41px;
    color: #fff;
    font-size: 16px;
    border-radius: 100px;
    line-height: 41px;
    margin: 42px 0 0 40px;
    text-align: center;
  }
  
  .time-type {
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    background: #85ce61;
    border-radius: 50%;
    opacity: 1;
    color: #fff;
    box-shadow: 5px 5px 2px #888888;
    margin: 20px 0 20px 40%;
  }
  
  .der {
    width: 240px;
    height: 174px;
    background: url("../../assets/img/evaluaction_service_plate.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .platesFoods {
    margin-top: 5px;
    margin-left: 8px;
  
    color: #333333;
    font-size: 16px;
  }
  .platesFoods div {
    padding-bottom: 18px;
  }
  .platesFoods span {
    color: #666666;
  }
  
  .plates {
    width: 33%;
    float: left;
  }
  
  .plates .plates-top-img {
    float: left;
    margin-left: 1%;
    width: 30%;
  }
  
  .time-left-color {
    background: #85ce61;
  }
  
  .time-common-color {
    background: #e8b973;
  }
  
  .time-right-color {
    background: #6ea9e0;
  }
  
  .images-lab {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(85% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 50px;
  }
  
  #params {
    margin-top: 3%;
    font-size: 22px;
    font-weight: bold;
  }
  
  .shu {
    width: 5px;
    height: 30px;
    background: #2196f3;
    opacity: 1;
    border-radius: 100px;
    float: left;
    margin-right: 2%;
    margin-left: 3%;
  }
  
  #params span {
    font-size: 15px;
    color: #666;
    margin-left: 2%;
  }
  
  li {
    list-style-type: none;
  }
  
  #params ul {
    margin-left: 3%;
  }
  
  .topColor {
    color: #e8b973;
  }
  
  .topBgColor {
    border: 1px solid #e8b973;
    background-color: #e8b973;
  }
  
  .normalColor {
    color: #2196f3;
  }
  
  .normalBgColor {
    border: 1px solid #2196f3;
    background-color: #2196f3;
  }
  
  .bottomColor {
    color: #6ca9e3;
  }
  
  .bottomBgColor {
    border: 1px solid #6ca9e3;
    background-color: #6ca9e3;
  }
  
  .images-lab span {
    font-size: 18px;
  }
  
  .images-right {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 15%;
    height: 20%;
    line-height: 34px;
    top: calc(95% - 54px);
    overflow: hidden;
    margin-left: 75%;
    font-size: 18px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
  }
  
  #enerty .bt {
    background: #f7f7f7;
    color: #fff;
  }
  
  #enerty .bt span {
    width: 25%;
    float: left;
    text-align: center;
    color: #999999;
    line-height: 30px;
  }
  
  #enerty ul li {
    width: 48%;
    display: inline-block;
    margin: 0;
  }
  
  #enerty .element span {
    width: 25%;
    float: left;
    text-align: center;
    line-height: 60px;
    font-size: 14px;
  }
  </style>
  